<template>
    <div ref="store" style=" width: 100%; height: 260px"></div>
</template>
  
<script>
import * as echarts from 'echarts/core';
import {
    GridComponent,
    VisualMapComponent,
    MarkLineComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { getShowfour } from "@/apis/dataSreening/salesData";

echarts.use([
    GridComponent,
    VisualMapComponent,
    MarkLineComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);


export default {
    data() {
        return {};
    },
    mounted() {
        this.drawpie();
    },
    methods: {
        drawpie() {
            getShowfour().then(({ data }) => {
                var chartDom = this.$refs.store;
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: "牛只泌乳曲线",
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '30%']
                    },
                    visualMap: {
                        type: 'piecewise',
                        show: false,
                        dimension: 0,
                        seriesIndex: 0,
                        pieces: [
                            {
                                gt: 1,
                                lt: 3,
                                color: 'rgba(0, 0, 180, 0.4)'
                            },
                            {
                                gt: 5,
                                lt: 7,
                                color: 'rgba(0, 0, 180, 0.4)'
                            }
                        ]
                    },
                    series: [
                        {
                            type: 'line',
                            smooth: 0.6,
                            symbol: 'none',
                            lineStyle: {
                                color: '#5470C6',
                                width: 5
                            },
                            markLine: {
                                symbol: ['none', 'none'],
                                label: { show: false },
                                data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                            },
                            areaStyle: {},
                            data: data.day.map((d, i) => [d, data.value[0][i]])
                           
                        }
                    ]
                };

                option && myChart.setOption(option);
            })

        },
    },
};
</script>
  
<style></style>